/**
 * 选择签章
 */
import axios from "axios";
import request from "../../framework/common/utils/request";
import "./sign.css"
import message from "../../framework/common/utils/message";
import { Tooltip,Spin } from "antd";
import { useEffect, useRef, useState } from "react";
import eventBus from "../../framework/common/eventBus";

export default function({
  CurUserGUID="",
  value="",//默认签章
  singUrl="",//默认签章图片
  onChange
}) {

  const [isLoading, setIsLoading] = useState(false);//获取签章列表加载中状态
  const [singList, setSingList] = useState([]);//签章列表数据
  const [toolTipShow, setTtoolTipShow] = useState(false);//签章列表显示状态，用于手动控制显示隐藏
  const [selectSignUrl, setselectSignUrl] = useState(singUrl);//默认签章图片
  const sourceRef = useRef();

  //获取签章数据
  useEffect(function(){
    sourceRef.current = axios.CancelToken.source();//获取签章接口增加一个请求表示
  },[]);

  function getSingList(){
    if(CurUserGUID === "" || CurUserGUID === undefined){
      console.log('缺少CurUserGUID，无法获取签章信息')
      return null;
    }
    if(isLoading === false){
      setIsLoading(true);
      sourceRef.current = axios.CancelToken.source();
      request({
          url: "/user/signature/get-mysign",
          data:{ 
            user_id: CurUserGUID
          },
          cancelToken: sourceRef.current.token
      }).then(function (resObj) {
        setIsLoading(false);
        if (resObj.code == 1) {
          if (resObj.data && resObj.data.list && resObj.data.list.length) {
              setSingList(resObj.data.list);//更新签章列表
          } else {
              message.info({
                content: "获取签章失败",
              });
          }
        }
      },function(error){
        if(error.message === "sourceCancel"){
          console.log('主动取消')
        }else{
          message.info({
            content: "获取签章失败",
          });
        }
        setIsLoading(false);//
      });
    }
  }

  function cancelSingList(){
    sourceRef.current.cancel('sourceCancel');//取消ajax请求
    setTimeout(function(){
      setSingList([]);//清空签章列表
    },500);
  }

  //选择签章事件
  function signImgClick(item){

    onChange(item.id);//触发父组件change
    eventBus.publish("signImage.updata", {
      imageUrl: item.image
    });//用于更新tplData内的默认签章图片
    setselectSignUrl(item.image);//更新签章图片
    setTtoolTipShow(false);//隐藏列表
    cancelSingList();//选择签章后，清空签章列表
  }

  return <Tooltip 
          placement="topRight" 
          overlayStyle={{"maxWidth": "546px"}}
          title={<InTitle singList={singList} value={value} signImgClick={signImgClick}></InTitle>} 
          color="white"
          visible={toolTipShow}
          onVisibleChange={(visible)=>{
            setTtoolTipShow(visible);//同步更新显示隐藏状态标记
            if(visible){//显示时，加载列表
              setTimeout(function(){
                getSingList();
              }, 200)
            }else{//隐藏后清除列表
              cancelSingList();
            }
          }}
          trigger="click">
            <div  className="inline-block border border-dashed signWrap border-d9d9d9">
              <img src={selectSignUrl} alt="" className="cursor-pointer w-[60px] h-30px object-contain"/>
            </div>
  </Tooltip>
}

function InTitle({singList, value, signImgClick}){
  return <Spin spinning={singList.length <= 0}>
    <ul className="signList min-w-160px min-h-85px">
        {
          singList.length>0
          &&  singList.map(function(item, index){
            return <li
                    key={index} 
                    className="inline-block mt-3 ml-3 border border-dashed cursor-pointer signImgWrap h-84px w-159px border-d9d9d9 hover:border-1990ff"
                    onClick={()=>{
                      signImgClick(item)
                    }}
                    data-id={item.id}>
                      <div className="relative overflow-hidden">
                        {
                          item.id === value
                          && <i className="absolute z-10 iconfont icon-yishenpi right-1 top-1 text-color-1990ff"></i>
                        }
                        <img className="relative z-0 w-[160px] h-[80px] object-contain" src={item.image} alt="" />
                      </div>
                  </li>
          })
        }
      </ul>
  </Spin>
}